<template>
  <div :class="$style.mainComp2Page">
    <div :class="$style.leftBlock" v-show="leftFlag">
      <div :class="$style.leftUl">
        <div :class="$style.leftLi" v-for="(item, index) in leftList" :key="index" @click="">
          <img :class="$style.leftLiIcon" :src="item.icon" alt="" />
          <div :class="$style.leftLiText">{{ item.name }}</div>
          <div :class="$style.leftLiText">{{ item.number1 }}</div>
          <div :class="[$style.leftLiColor, item.type == 1 ? $style.leftLiGreen : $style.leftLiRed]">
            {{ item.type == 1 ? '-' : '+' }}{{ item.number2 }}
          </div>
        </div>
      </div>
    </div>
    <div :class="[$style.mainBlock,(leftFlag||rightFlag?$style.mainBlockLong1:(!leftFlag&&!rightFlag?$style.mainBlockLong2:''))]">
      <ChartModal @changeLeft="changeLeft" @changeRight="changeRight" />
    </div>
    <div :class="$style.rightBlock" v-show="rightFlag">
      <BuyModal />
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import BuyModal from "./BuyModal.vue";
import ChartModal from "./ChartModal.vue";
export default defineComponent({
  name: "MainComp2",
  components: {
    BuyModal,
    ChartModal,
  },
  data() {
    return {
      leftList: [
        { icon: '/eurusd.png', name: 'EURUSD', type: 1, number1: 1.07254, number2: 0.00028 },
        { icon: '/eurusd.png', name: 'EURUSD', type: 1, number1: 1.07254, number2: 0.00028 },
        { icon: '/eurusd.png', name: 'EURUSD', type: 2, number1: 1.07254, number2: 0.00028 },

      ],
      leftFlag:true,
      rightFlag:true,
    };
  },
  methods: {
    changeRight(){
      this.rightFlag=!this.rightFlag;
    },
    changeLeft(){
      this.leftFlag=!this.leftFlag;
    },    
  }
});
</script>
<style module>
.mainComp2Page {
  width: 100%;
  height: 100%;
  display: flex;
}

.leftBlock {
  width: 300px;
  height: 100%;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 10px;
  margin-right: 5px;
}

.leftUl {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.leftLi {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: 1px solid #DCDFE6;
  cursor: pointer;
}

.leftLiIcon {
  width: 20px;
  height: 20px;
}

.leftLiText {
  font-family: Arial;
  font-size: 16px;
  font-weight: normal;
  color: #000000;
  margin-left: 10px;
}

.leftLiColor {
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  color: #FFFFFF;
  height: 28px;
  line-height: 28px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 2px;
  margin-left: 10px;
}

.leftLiRed {
  background-color: #EC5B56;
}

.leftLiGreen {
  background-color: #13CE66;
}

.mainBlock {
  width: calc(100% - 300px - 5px - 300px - 5px);
  height: 100%;
}

.mainBlockLong1{
  width: calc(100% - 300px - 5px);
}

.mainBlockLong2{
  width:100%;
}

.rightBlock {
  width: 300px;
  height: 100%;
  background-color: #FFFFFF;
  margin-left: 5px;
}
</style>